<template>
  <view class="user" style="height: 100vh;">
  <view class="user-top">
      <image class="user-top-Avatar" :src="userInfo.avatarUrl" mode=""></image>
      <text class="user-top-txt">{{userInfo.nickName}}</text>
  </view>
  <view class="user-bottom">
    <view class="user-bottom-one">
      <view class="user-bottom-one-item">
        <view class="user-bottom-one-item-num">
          8
        </view>
        <view class="user-bottom-one-item-txt">
          收藏的店铺
        </view>
      </view>      
      <view class="user-bottom-one-item">
        <view class="user-bottom-one-item-num">
          14
        </view>
        <view class="user-bottom-one-item-txt">
          收藏的商品
        </view>
      </view>     
       <view class="user-bottom-one-item">
        <view class="user-bottom-one-item-num">
          18
        </view>
        <view class="user-bottom-one-item-txt">
          关注的商品
        </view>
      </view>      
      <view class="user-bottom-one-item">
        <view class="user-bottom-one-item-num">
          84
        </view>
        <view class="user-bottom-one-item-txt">
          足迹
        </view>
      </view>
    </view>
    <!-- 列表二 -->
    <view class="user-bottom-two">
      <view class="user-bottom-two-title">
        我的订单
      </view>
      <view class="user-bottom-two-conter">
        <view class="user-bottom-two-conter-item">
          <image class="img" src="../../static/my-icons/icon1.png" mode=""></image>
          <text class="txt">待付款</text>
        </view>
        <view class="user-bottom-two-conter-item">
          <image class="img" src="../../static/my-icons/icon2.png" mode=""></image>
          <text class="txt">待收货</text>
        </view>
        <view class="user-bottom-two-conter-item">
          <image class="img" src="../../static/my-icons/icon3.png" mode=""></image>
          <text class="txt">退款/退货</text>
        </view>
        <view class="user-bottom-two-conter-item">
          <image class="img" src="../../static/my-icons/icon4.png" mode=""></image>
          <text class="txt">全部订单</text>
        </view>
      </view>
    </view>
    <!-- 三 -->
    <view class="user-bottom-three">
      <view class="user-bottom-three-item">
        <text class="user-bottom-three-item-txt">收货地址</text>
        <uni-icons class="user-bottom-three-item-icon" type="right" size="18"></uni-icons>
      </view>
      <view class="user-bottom-three-item">
        <text class="user-bottom-three-item-txt">联系客服</text>
        <uni-icons class="user-bottom-three-item-icon" type="right" size="18"></uni-icons>
      </view>
      <view class="user-bottom-three-item"  @click="logout">
        <text class="user-bottom-three-item-txt">退出登录</text>
        <uni-icons class="user-bottom-three-item-icon" type="right" size="18"></uni-icons>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
  import { mapState,mapActions } from 'vuex'
  export default {
    name:"my-userinfo",
    computed:{
      ...mapState('user',['userInfo'])
    },
    data() {
      return {
        
      };
    },
    methods:{
      ...mapActions({logOut:'user/logOut'}),
     async logout(){
     const [err,res] = await uni.showModal({
           title: '提示',
           content: '您确定要退出吗？'
        })
        if(err) return uni.$showMsg('出错了')
        if(res.errMsg !== "showModal:ok") return uni.$showMsg('出错了')
        console.log(1);
        if(res.confirm){
          this.logOut()
        }
      }
    }
  }
</script>

<style lang="scss">
.user{
   background-color: #f4f4f4;
  &-top{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #c00000;
    height: 400rpx;
    &-Avatar{
      height: 160rpx;
      width: 160rpx;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-bottom: 20rpx;
    }
    &-txt{
      color: #fff;
    }
  }
  &-bottom{
    padding: 0 20rpx;
    &-one{
      display: flex;
      background-color: #fff;
      padding: 20rpx;
      transform: translateY(-20rpx);
      border-radius: 4px;
      &-item{
        flex: 1;
        text-align: center;
      }
    }
    &-two{
      background-color: #fff;
      &-title{
        line-height: 80rpx;
        border-bottom: 1px solid #ccc;
        padding-left: 20rpx;
      }
      &-conter{
        padding:20rpx  0 ;
        display: flex;
        &-item{
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .img{
            height: 80rpx;
            width: 80rpx;
          }
        }
      }
    }
    &-three{
      background-color: #fff;
      margin-top: 20rpx;
     &-item{
       display: flex;
       justify-content: space-between;
       padding: 20rpx;
     } 
    }
  }
}
</style>